<template>
  <div class="login-container">
    <div class="w-1200 login-content">
      <div class="login-left hidden-xs-only">
        <div class="inner">
          <h2>Hi, 诚浩汽车服务平台欢迎您</h2>
          <p>wapi.cn</p>
        </div>
      </div>
      <div class="login-right">
<!--        <LoginForAccount />-->
        <component :is="loginComponent" />
      </div>
    </div>
  </div>
</template>

<script>
import LoginForAccount from '@/views/login/LoginForAccount'
import LoginForCode from '@/views/login/LoginForCode'
import LoginForQr from '@/views/login/LoginForQr'
export default {
  name: 'Login',
  components: {
    LoginForAccount,
    LoginForCode,
    LoginForQr
  },
  data() {
    return {
      loginComponent: ''
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
        this.loginComponent = route.name
      },
      immediate: true
    }
  },
  created() {
    // console.log(this.$route.name, 'nnnnn')
    // this.loginComponent = this.$route.name
    // if (this.$route.query.reload) {
    //   this.$router.replace('/login')
    //   window.location.reload()
    // }
  },
  methods: {
  }
}
</script>

<style lang="scss">
@import "../../element-variables.scss";

$bg: #ebf1fc;
$light_gray: #fff;
$cursor: #fff;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
  }
}

/* reset element-ui css */
.login-container {
  .login-component {
    background-color: #fff;
    position: relative;
    width: 400px;
    margin: 0 0 0 auto;
    overflow: hidden;
    padding: 20px;
    border-radius: 8px;
    .message-box {
      display: flex;
      align-items: center;
      .msg-input {
        flex: 1;
      }
      .msg-button {
        margin-left: 10px;
      }
    }

    @media (max-width: 767px) {
      & {
        width: 100%;
      }
    }
  }
  .keep-login {
    margin: 25px 0 10px;
    display: flex;
    justify-content: right;
    align-items: center;
  }
  .icon-container {
    padding: 5px 0 5px 12px;
    vertical-align: middle;
    width: 27px;
    display: inline-block;
  }
  .login-tool {
    margin: 15px 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      cursor: pointer;
      line-height: 1;
      &.forgot-button {
        font-size: 14px;
        color: #999;
        &:hover {
          color: $--color-primary;
        }
      }
      &.register-button {
        font-size: 15px;
        color: $--color-primary;
        //text-decoration: underline;
        border-bottom: 1px solid $--color-primary;
      }
    }
  }
  .pwd-input {
    margin-bottom: 0 !important;
  }
  .el-input {
    display: inline-block;
    height: 40px;
    width: 85%;

    input {
      background: transparent;
      border: 0;
      -webkit-appearance: none;
      border-radius: 0;
      padding: 12px 5px 12px 15px;
      color: $light_gray;
      height: 40px;
      caret-color: $cursor;

      &:-webkit-autofill {
        box-shadow: 0 0 0 1000px $bg inset !important;
        -webkit-text-fill-color: $cursor !important;
      }
    }
  }

  .el-form-item {
    border: 1px solid #ced4da;
    background: #ebf1fc;
    border-radius: 5px;
    color: #454545;
    .el-form-item__content {
      display: flex;
      align-items: center;
    }
  }
  .qr-switch {
    position: absolute;
    width: 38px;
    height: 38px;
    cursor: pointer;
    right: 10px;
    top: 10px;
    z-index: 3;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    &.qr {
      background-image: url("../../assets/images/login-qr.png");
    }
    &.account {
      background-image: url("../../assets/images/login-account.png");
    }
  }
  .login-tab {
    border-bottom: 1px solid #efeded;
    display: flex;
    margin-bottom: 20px;
    .login-tab-item {
      margin: 0 20px 0 0;
      font-size: 16px;
      cursor: pointer;
      color: #666;
      border-bottom: 2px solid transparent;
      //line-height: 58px;
      padding: 20px 0 12px;
      position: relative;
      bottom: -3px;
      &.active {
        color: $--color-primary;
        border-bottom: 3px solid $--color-primary;
      }
    }
  }
}
</style>

<style lang="scss" scoped>

.login-container {
  //min-height: 100%;
  width: 100%;
  background-color: #79c7f2;
  overflow: hidden;

  .login-content {
    display: flex;
    padding: 100px 0;
  }
  .login-left, .login-right {
    width: 50%;
  }
  .login-left {
    color: #fff;
    display: flex;
    flex-direction: row;
    //justify-content: center;
    align-items: center;
    .inner {
      text-align: center;
      width: 500px;
      h2 {
        font-size: 38px;
        font-weight: 500;
      }
      p {
        margin-top: 25px;
        font-size: 26px;
        letter-spacing: 3px;
        font-weight: 700;
      }
    }
  }
  .login-right {
    //display: flex;
    //justify-content: right;
  }
  @media (max-width: 767px) {
    .login-content {
      padding: 20px 0 80px;
    }
    .login-right {
      width: 100%;
    }
    .login-form {
      width: 100%;
    }
  }
}
</style>
